<template>
    <n-modal v-model:show="compControl.showModal">
        <n-card style="max-width: 600px" :bordered="true" role="dialog" aria-modal="true">
            <template #header>
                <p style="font-size: 1.25rem">修改配置项</p>
            </template>
            <template #header-extra>
                <n-icon style="cursor: pointer" size="18" @click="compControl.showModal = false">
                    <CloseFilled />
                </n-icon>
            </template>
            <div>
                <n-form ref="formRef" label-placement="left" label-width="3.5rem">
                    <n-form-item label="键名" class="wrapper-mb-1">
                        <p>{{ compControl.modal_show_data.key }}</p>
                    </n-form-item>
                    <n-form-item label="介绍" class="wrapper-mb-1">
                        <p>{{ compControl.modal_show_data.description }}</p>
                    </n-form-item>
                    <n-form-item label="默认值" class="wrapper-mb-1">
                        <p>{{ compControl.modal_show_data.default }}</p>
                    </n-form-item>
                    <n-form-item label="键值">
                        <n-space style="gap: 0; flex: 1" vertical>
                            <n-input
                                v-model:value="compControl.modal_show_data.value"
                                clearable
                                placeholder="Input" />
                            <n-space style="gap: 0 2px">
                                快捷填入：
                                <n-space style="gap: 0 4px">
                                    <n-tag
                                        size="small"
                                        class="tw-cursor-pointer"
                                        @click="compControl.modal_show_data.value = 'YES'">
                                        YES
                                    </n-tag>
                                    <n-tag
                                        size="small"
                                        class="tw-cursor-pointer"
                                        @click="compControl.modal_show_data.value = 'NO'">
                                        NO
                                    </n-tag>
                                </n-space>
                            </n-space>
                        </n-space>
                    </n-form-item>
                </n-form>
            </div>
            <template #footer>
                <n-space justify="space-between">
                    <n-space></n-space>
                    <n-space>
                        <n-button @click="compControl.showModal = false">取消</n-button>
                        <n-button type="primary" @click="compControl.handleConfirmEdit()">确认</n-button>
                    </n-space>
                </n-space>
            </template>
        </n-card>
    </n-modal>
</template>

<script setup lang="ts">
import { apx_editOptionValue, type ConfigurationItem } from '@/utils/interface/ConfigurationItem'
import { useMessage } from 'naive-ui'
import { CloseFilled } from '@vicons/material'
import { reactive } from 'vue' 
import { useMainStore } from '@/utils/store'
const message = useMessage()
const store = useMainStore()
const compControl = reactive({
    showModal: false,
    modal_show_data: {} as ConfigurationItem, //JSON Copy过的死数据，用于修改
    modal_reactive_data: {} as ConfigurationItem, //从表格获取的reactive活数据

    handleConfirmEdit() {
        apx_editOptionValue(compControl.modal_show_data.key, compControl.modal_show_data.value).then(
            (response_data) => {
                compControl.modal_reactive_data.value = compControl.modal_show_data.value
                message.success('操作成功')
                compControl.showModal = false
                if (compControl.modal_show_data.key == 'anonymous_enable') {
                    store.session.user_mgmt.user_type_status.handleUpdateUserTypeStatus('anonymous')
                }
            }
        )
    }
})
function handleShow(row: ConfigurationItem) {
    compControl.modal_show_data = JSON.parse(JSON.stringify(row))
    compControl.modal_reactive_data = row
    compControl.showModal = true
}
defineExpose({ handleShow })
</script>

<style lang="scss"></style>
